<template>
  <div>
    <el-table :data="tableData" style="width: 100%" max-height="850">
      <el-table-column fixed prop="time" label="日期" width="200" />
      <el-table-column prop="id" label="用户名" width="150" />
      <el-table-column prop="content" label="反馈信息" width="900" />
      <el-table-column label="状态" width="120">
      <template slot-scope="scope">
        <span v-if="scope.row.state === 1">已完成</span>
        <span v-else>未完成</span>
      </template>
    </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑反馈" :visible.sync="dialogVisible" width="50%">
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.id"disabled></el-input>
        </el-form-item>
        <el-form-item label="反馈信息">
          <el-input type="textarea" v-model="editForm.content"disabled></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input type="textarea" v-model="editForm.state"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="onSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateData } from '@/api/guanli'; 
import { getList } from '@/api/guanli'; 
export default {
  data() {
    return {
      tableData: [
        {
          paper_id:'' ,
          date: '',
          name: '',
          exam: '',
          state: '',
        }
        // 更多数据项
      ],
      dialogVisible: false,
      editForm: {},
      paper_id:'',
      viewDetailsData: {}, // 用于存储查看时的数据
    };
  },
  async mounted() {
    this.getList()
  },
  methods: {
    viewDetails(row) {
      this.viewDetailsData = { ...row };
      this.dialogVisible = true;
    },
    dialogClosed() {
      this.viewDetailsData = {}; // 关闭对话框时清空查看数据
    },
    editRow(row) {
      this.editForm = { ...row };
      this.dialogVisible = true;
    },
    async getList() {
    const data = {
        paper_id:'',
      }
    const res = await getList(data)
    console.log(res);
    console.log('--------------------------');
    this.tableData = res.data.data
  },
  async onSubmit() {
    // 使用editForm而不是未定义的data
    const res = await updateData(this.editForm);
    console.log(res);
    if (res.status === 200) {
      this.$message.success('反馈信息更新成功！');
      this.dialogVisible = false; // 关闭对话框
      await this.getList(); // 刷新数据列表
    } else {
      this.$message.error('更新反馈信息失败，请重试。');
    }
  },
}
  }
</script>